{% extends "base.html" %}
{% load static %}

{% block header-css %}
    <style>
        pre {
            white-space: pre-wrap;
            white-space: -moz-pre-wrap;
            white-space: -o-pre-wrap;
            word-wrap: break-word;
        }
    </style>
{% endblock %}




{% block  title %}命令行{% endblock %}

{% block page-content %}


    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-lg-10">
            <h2>数据库操作</h2>
            <ol class="breadcrumb">
                <li>
                    <a href="/index.html">主页</a>
                </li>
                <li>
                    <a>任务</a>
                </li>
                <li class="active">
                    <strong>数据库操作</strong>
                </li>
            </ol>
        </div>
        <div class="col-lg-2">

        </div>
    </div>
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-5">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>数据库操作</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#">选项 1</a>
                                </li>
                                <li><a href="#">选项 2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="table-responsive ">

                            <form class="form-horizontal  cmd_from">

                                <table class="table table-striped table-bordered table-hover dataTables-example">
                                    <thead>
                                    <tr>
                                        <th width="20"><input type="checkbox" id="CheckedAll"></th>
                                        <th>IP</th>

                                        <th>名字</th>
                                        <th>用户</th>
                                        <th>产品线</th>

                                    </tr>
                                    </thead>
                                    <tbody>

                                    {% for   row   in   sql_list %}

                                        <tr class="gradeA" id="{{ row.id }}">
                                            <td><input type="checkbox" value="{{ row.id }}" name="id"></td>
                                            <td class="center"><a
                                                    href="{% url  "db:db_detail"   pk=row.id %}">{{ row.ip }}</a>
                                            </td>
                                            <td class="center">{{ row.hostname }}</td>
                                            <td class="center">{{ row.db_user }}</td>
                                            <td class="center">{{ row.product_line }}</td>
                                        </tr>
                                    {% endfor %}

                                    </tbody>

                                </table>


                                <div class="ibox-content  ">
                                    <div class="form-group"><label class="col-sm-2 control-label">数据库库名</label>
                                        <div class="col-sm-10" id="xiala">

                                        </div>
                                    </div>
                                    <div class="form-group"><label class="col-sm-2 control-label">查询接口</label>

                                        <div class="col-lg-6 col-sm-6"><textarea name="sql" class="sql_q" rows="2"
                                                                                 cols="60" required=""></textarea>
                                        </div>


                                    </div>
                                    <div class="hr-line-dashed"></div>


                                    <div class="form-group">
                                        <div class="col-sm-6 col-sm-offset-2">

                                            <a class="btn btn-primary sql_query" type="submit">查询</a>
                                            <a class="btn btn-primary sql_query_databases" type="submit">查询数据库名字</a>
                                        </div>
                                    </div>


                                    <div class="form-group"><label class="col-sm-2 control-label">执行命令</label>

                                        <div class="col-lg-6 col-sm-6"><textarea id="sql_c" name="sql" rows="4"
                                                                                 cols="60" required=""></textarea>
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>


                                    <div class="form-group">
                                        <div class="col-sm-6 col-sm-offset-2">

                                            <a id="sql_check" class="btn btn-primary" type="submit">自动审核</a>

                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            <a id="sql_exe" class="btn btn-danger" type="submit">命令执行</a>
                                        </div>
                                    </div>

                                </div>


                                <div class="ibox-content">
                                    <div class="form-group"><label class="col-sm-2 control-label">sequence</label>

                                        <div class="col-lg-8 col-sm-9"><input type="text" class="form-control"
                                                                              placeholder="sequence"
                                                                              name="sequence"><span
                                                class="help-block m-b-none"></span>
                                        </div>
                                    </div>
                                    <div class="form-group"><label class="col-sm-2 control-label">backup_dbname</label>

                                        <div class="col-lg-8 col-sm-9"><input type="text" class="form-control"
                                                                              placeholder="backup_dbname"
                                                                              name="backup_dbname"><span
                                                class="help-block m-b-none"></span>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="col-sm-6 col-sm-offset-2">

                                            <a id="sql_rb" class="btn btn-danger" type="submit">查询回滚</a>

                                            </button>
                                        </div>
                                    </div>

                                </div>

                            </form>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-sm-7">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>输出结果
                        </h5>
                        <div class="ibox-tools">
                            <a class="collapse-links">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#">配置选项 1</a>
                                </li>
                                <li><a href="#">配置选项 2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content  pre_query">

                        <pre> <span id="err_query">查询功能   只能使用  select , show, desc等命令。 只能执行单条语句。
</span></pre>
                    </div>


                    <div class="ibox-content  pres">

                        <pre> <span id="err">执行 mysql 命令 以 ; 分割      命令执行是忽略警告的，请注意！ 警告仅供参考，修改SQL命令。  SQL命令可手动回滚。
 例如： 创建库  先选择   mysql 库,    然后执行： CREATE DATABASE `1213` CHARACTER SET utf8mb4;
 例如： 创建表   选中库之后 ,  CREATE TABLE `1213` (id int) ;</span></pre>
                    </div>

                    <div class="ibox-content  ">

                        <pre> <span id="sql_rb1">回滚命令, 因为回滚比较重要，  请手动输入上面想要回滚语句的 返回信息，例如：

sequence : 1514198102_234_0   ###不要加标点
backup_dbname : 192_168_10_81_3306_hequan1
                        </span></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>



    {% block footer-js %}
        <script type="text/JavaScript">
            $.ajaxSetup({headers: {"X-CSRFToken": '{{ csrf_token }}'}});
        </script>

        <script>

            $(function () {

  $(document).on('click','.sql_query',function () {


                    var ids = $('input[name="id"]:checked').val();
                    var val = $('input:radio[name="databases"]:checked').val();
                    if (val == null) {
                        alert("请先执行 查询数据库名字，之后选中要查询的库名字");
                        return false;
                    }
                    var sql_query3 = $(".sql_q").val();
                    var db = val;
                    $.ajax({
                        url: "/tasks/Inception-query.html",
                        type: 'POST',
                        data: {"id": ids, "sql": sql_query3, 'databases': db},


                        success: function (data) {
                            var obj = JSON.parse(data);
                            cons = "";
                            if (obj.data) {
                                $.each(obj, function (data, values) {
                                    $.each(values, function (index, value) {
                                        cons += "<pre>" + "主机:" + value.ip + "\n" + "结果: \n " + value.data.split("\"").join("") + "</pre>"

                                    });
                                    $(".pre_query").html(cons); //把内容入到这个div中即完成
                                });
                            } else {
                                $('#err_query').text(obj.error);
                            }

                        }

                    })
                });

  $(document).on('click','.sql_query_databases',function () {

                    var ids = $('input[name="id"]:checked').val();

                    $.ajax({
                        url: "/tasks/Inception-query-databases.html",
                        type: 'POST',
                        data: {"id": ids},
                        success: function (data) {
                            var obj = JSON.parse(data);
                            cons = "";
                            if (obj.data) {
                                $.each(obj, function (data, values) {
                                    $.each(values, function (index, value) {
                                        var aaa = value.data;
                                        $.each(aaa, function (index, val) {
                                            $("#xiala").append('<label class="radio-inline"><input type="radio"  value=' + val + ' name="databases" required="">' + val + '</label>');

                                        });
                                        {#                                    $(".pre_query").html(cons); //把内容入到这个div中即完成#}
                                    });


                                })
                            } else {
                                $('#err_query').text(obj.error);
                            }

                        }

                    })
                });

  $(document).on('click','#sql_check',function () {


                    var ids = $('input[name="id"]:checked').val();
                    var val = $('input:radio[name="databases"]:checked').val();
                    if ( val == null ) {
                        alert("请先执行 查询数据库名字，之后选中要查询的库名字");
                        return false;
                    }
                    var sql_query1 = $("#sql_c").val();
                    var db = val;


                    $.ajax({
                        url: "/tasks/Inception.html",
                        type: 'POST',
                        data: {"id": ids, "sql": sql_query1, 'databases': db},
                        success: function (data) {
                            var obj = JSON.parse(data);
                            cons = "";
                            if (obj.data) {
                                $.each(obj, function (data, values) {
                                    $.each(values, function (index, value) {
                                        cons += "<pre>" + "主机:" + value.ip + "\n" + "结果: \n " + value.data + "</pre>"

                                    });
                                    $(".pres").html(cons); //把内容入到这个div中即完成
                                });
                            } else {
                                $('#err').text(obj.error);
                            }

                        }

                    })
                });
  $(document).on('click','#sql_exe',function () {



                    var ids = $('input[name="id"]:checked').val();
                    var val = $('input:radio[name="databases"]:checked').val();
                    if (val == null) {
                        alert("请先执行 查询数据库名字，之后选中要查询的库名字");
                        return false;
                    }
                    var sql_query1 = $("#sql_c").val();
                    var db = val;


                    $.ajax({
                        url: "/tasks/Inception-exe.html",
                        type: 'POST',
                        data: {"id": ids, "sql": sql_query1, 'databases': db},
                        success: function (data) {
                            var obj = JSON.parse(data);
                            cons = "";
                            if (obj.data) {
                                $.each(obj, function (data, values) {
                                    $.each(values, function (index, value) {
                                        cons += "<pre>" + "主机:" + value.ip + "\n" + "结果: \n " + value.data + "</pre>"

                                    });
                                    $(".pres").html(cons); //把内容入到这个div中即完成
                                });
                            } else {
                                $('#err').text(obj.error);
                            }

                        }

                    })
                });
  $(document).on('click','#sql_rb',function () {


                    $.ajax({
                        url: "/tasks/Inception-rb.html",
                        type: 'POST',
                        data: $('.cmd_from').serialize(),
                        success: function (data) {
                            var obj = JSON.parse(data);
                            cons = "";
                            if (obj.data) {
                                $('#sql_rb1').text(obj.data);
                            } else {
                                $('#sql_rb1').text(obj.error);
                            }

                        }

                    })
                });


            });

            function clearBody() {
                location.reload()
            }

        </script>


    {% endblock %}

{% endblock %}